<script setup>
  import { nextTick, ref, watch } from 'vue'
  import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'

  const props = defineProps({
    modelValue: Boolean,
    fileUrl: String,
    fileName: String
  })

  const emit = defineEmits(['update:modelValue'])

  const isPlaying = ref(false)
  const currentTime = ref(0)
  const duration = ref(0)
  const audioRef = ref(null)

  const formatTime = time => {
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
  }

  const togglePlay = () => {
    if (!audioRef.value) return

    if (isPlaying.value) {
      audioRef.value.pause()
    } else {
      audioRef.value.play()
    }
    isPlaying.value = !isPlaying.value
  }

  const handleTimeUpdate = () => {
    if (audioRef.value) {
      currentTime.value = audioRef.value.currentTime
    }
  }

  const handleLoadedMetadata = () => {
    if (audioRef.value) {
      duration.value = audioRef.value.duration
    }
  }

  const handleSeek = val => {
    if (audioRef.value) {
      audioRef.value.currentTime = val
      currentTime.value = val
    }
  }

  const handleClose = () => {
    if (audioRef.value) {
      audioRef.value.pause()
      audioRef.value.src = ''
      audioRef.value.load()
    }
    isPlaying.value = false
    currentTime.value = 0
    duration.value = 0
    emit('update:modelValue', false)
  }

  const handleEnded = () => {
    isPlaying.value = false
    currentTime.value = 0
    if (audioRef.value) {
      audioRef.value.currentTime = 0
    }
  }

  watch(
    () => props.modelValue,
    async newVal => {
      if (!newVal) {
        handleClose()
        return
      }

      await nextTick()
      if (audioRef.value) {
        try {
          await audioRef.value.load()
          isPlaying.value = true
          audioRef.value.play()
        } catch (error) {
          console.warn('Audio playback error:', error)
          isPlaying.value = false
        }
      }
    }
  )

  watch(
    () => props.fileUrl,
    () => {
      if (audioRef.value) {
        audioRef.value.load()
      }
    }
  )
</script>

<template>
  <div v-if="modelValue" class="audio-player-container">
    <div class="audio-player">
      <div class="close-button" @click="handleClose">
        <SvgIcon height="20px" name="close-fill2" width="20px" />
      </div>
      <div class="player-content">
        <div class="player-logo">
          <SvgIcon height="48px" name="file-type-audio" width="48px" />
        </div>
        <div class="player-info">
          <div class="song-title">{{ fileName }}</div>
          <div class="player-controls">
            <el-slider
              v-model="currentTime"
              :max="duration"
              :show-tooltip="false"
              class="progress-slider"
              @input="handleSeek"
            />
            <div class="time-info">
              {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
            </div>
          </div>
        </div>
        <div class="control-buttons">
          <el-button class="control-btn" @click.stop="togglePlay">
            <SvgIcon :name="isPlaying ? 'stop' : 'play'" height="26px" width="26px" />
          </el-button>
        </div>
      </div>
    </div>

    <audio
      ref="audioRef"
      :src="fileUrl"
      @ended="handleEnded"
      @loadedmetadata="handleLoadedMetadata"
      @timeupdate="handleTimeUpdate"
    />
  </div>
</template>

<style lang="less" scoped>
  .audio-player-container {
    height: 100px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
  }

  .audio-player {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    width: 450px;
    height: 100px;
  }

  .close-button {
    position: absolute;
    top: 0;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: opacity 0.3s;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }

  .player-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 16px 0 24px 16px;
    gap: 20px;
  }

  .player-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #e8f3ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .player-info {
    flex: 1;
    min-width: 0;

    .song-title {
      font-size: 15px;
      color: #333;
      margin-top: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .player-controls {
    .progress-slider {
      margin-bottom: 6px;
    }

    .time-info {
      font-size: 13px;
      color: #909399;
    }
  }

  .control-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .control-btn {
    margin-right: 20px;
    margin-top: 6px;
    height: 36px;
    width: 36px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-slider__runway) {
    margin: 8px 0;
  }

  :deep(.el-slider__bar) {
    background-color: #409eff;
  }

  :deep(.el-slider__button) {
    border: 2px solid #409eff;
    width: 12px;
    height: 12px;
  }
</style>
